HTML Text Section – Typography Journal

*Instructions are in bold side notes are in red
Create a folder called “Typography_Journal”  and create another folder inside called images.  (Check out: http://psdp3.com/mgd141/assignments/procedure.cfm) *This will be a step by step project that culminates into a full website. Please save all files in the same directory

Create a site in Dreamweaver called "Typography_Journal"  and connect to the folder
(Ref: http://psdp3.com/mgd141/2/12.cfm)

Create a new html file and save it as: Typography_Journal_text.html (inside the site folder)

Add the following text in the title tag: "Typography Journal - A guide to the best typeface"

Create a style tag in the head and paste the following code:
<style type="text/css">
	@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,700,700i');
</style>
 (we will use a separate style sheet later)
 (Ref: http://psdp3.com/mgd141/9/7.cfm)

Create a body style and give it these properties: *note the syntax in the instructions are not always100% correct…the following is correct so you can use it as a reference
	font-family: 'Open Sans', sans-serif; 
	font-size: 16px;
	font-weight: 300;
	color: #555555;
	background-color: #eee9d9
(Ref: http://psdp3.com/mgd141/9/8.cfm)

*Note: There are very many different ways to accomplish colors, font size, bold, italics. The best is to create styles so that you can reuse them continuously

Body Content (instructions in bold content text not in bold) 
(Ref: http://psdp3.com/mgd141/9/7.cfm)

H1, text aligned center and color #6d0911, size 2.8em, weight 700. 
(Create an H1 style). The following should be tag styles except for the .heading style below
Typography Journal

H2, text aligned center, size 1.6em, weight 700 
A guide to the best typeface
Challenge:
The H1 and H2 lines are too far apart…create a class style called .heading that reduces the space and apply it to the H2 (hint…you can use negative values)

(All the rest of the content is left aligned with the exception of H2 History of Typography)

H3, size 1.3em, weight 700 
Typography rules and terms

Paragraph
Typography is, quite simply, the art and technique of arranging type. It's central to the work and skills of a designer and is about much more than making the words legible.

H3
Choosing a font

Paragraph
Your choice of typeface and how you make it work with your layout, grid, colour scheme, design theme and so on will make the difference between a good, bad and great design.

H3
Hierarchy and scale

Paragraph
If all type was the same size, then it would be difficult to know which was the most important information on the page.

H2 (aligned center)
History of Typography

Paragraph
For as long as the written word has existed, typefaces and typography have been apart. From its roots in the midst of times and origins of communication to the million dollar industry it is today, very little has done as much to influence the graphical world we see. 

Blockquote  color #444, background color #fff, padding 10px
Many people don't usually even think about what font they are using but typeface is an important piece in writing and communicating with each other.
	paragraph within the blockquote after the last text:
	Bold Unknown (line break)
	Italic Visually Website (line break)
	http://visual.ly/history-typography
Two ways to do bold and Italic

(the following should be an un-ordered list)
(Ref: http://psdp3.com/mgd141/4/7.cfm)

First list item
H4
Visual Hierarchy
Paragraph
Visual hierarchy is the concept of organizing elements on a page in a definite way that establishes an order of importance. 
Sublist
Learn More

Second list item

H4
Gestalt Laws in Typography
Paragraph
Gestalt principles, or gestalt laws, are rules of the organization of perceptual scenes. 
Sublist
Learn More

(End un-ordered list)
The list has too much space so add a -10px margin-top li tag style

Paragraph
© Typography Journal | Privacy Policy | Terms of Service

Save your work